<template>
  <div class="message left">
    <el-form 
              :model="ruleForm"
             status-icon
             :rules="rules"
             ref="ruleForm"
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="邮箱"
                    prop="email"
                     :rules="[
                          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                        ]">
        <el-input type="text"
                  v-model="ruleForm.email"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机"
                    prop="phone">
        <el-input v-model="ruleForm.phone"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="名字"
                    prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="内容"
                    prop="content">
        <el-input type="textarea"
                  v-model="ruleForm.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   :loading="btnLoading"
                   @click="submit('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Loading from '../components/loading.vue'
import axios from 'axios'
export default {
  data () {
    return {
      loading:true,
      btnLoading:false,
      ruleForm:{
        name:'',
        phone:'',
        content:'',
        email:''
      },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
            ],
            phone: [
              { required: true, message: '请输入手机号', trigger: 'blur' }
             
            ],
            content: [
              { required: true, message: '请添加内容', trigger: 'blur' }
            ]
          }
        };
  },
  components:{
     Loading
  },
  mounted () {
    var that = this
    setTimeout(()=>{
      that.loading=false
    },3000)
  },
  methods:{
    submit(formName){
       let userId = this.getCookie('userID');
       let userName = this.getCookie('userName')
       this.$refs[formName].validate((valid) => {
          if (valid) {
              console.log( this.$refs[formName].model.phone)
                  axios.post('api/message/',{userId:userId,Phone:this.$refs[formName].model.phone,content:this.$refs[formName].model.content,userName:userName,Email:this.$refs[formName].model.email})
                      .then(data => {
                                    this.$message({
                                          message:data.data.content,
                                          type: data.data.type
                                        });
                      })
          } else {
            this.$message({
                message: "请您完善表中的信息！",
                type: "success"
              });
            return false;
          }
        });
    
    }
  }
}
</script>

<style scoped>
@import url("../less/index.less");
.message {
  padding: 100px 20px 0 20px;
}
</style>